<template>
    <div class="editorform">
        <table class="editorformTable" border="1" bordercolor="#ffffff" cellspacing="0" cellpadding="0">
            <tr v-for="(item, index) in option" :key="index" class="editorformItem">
                <div v-if="item.isShow">
                    <td class="editorformItemName">{{ item.label }}</td>
                    <td style="width: 184px">
                        <div>
                            <!-- 文本 -->
                            <span v-if="item.type == 'text'">{{ item.value }}</span>
                            <!-- 选择器 -->
                            <el-select
                                v-if="item.type == 'select'"
                                v-model="item.value"
                                class="editorforminput"
                                :placeholder="item.name"
                                @change="item.change(item.value, option, data, property)"
                            >
                                <el-option v-for="opt in item.options" :key="opt.value" :label="opt.label" :value="opt.value" />
                            </el-select>
                            <!-- 输入框 -->
                            <el-input
                                v-if="item.type == 'input'"
                                v-model="item.value"
                                @input="item.change(item.value, option, data, property)"
                                class="editorforminput"
                                placeholder="Please input"
                            />
                            <!-- 数字输入框 -->
                            <el-input-number
                                v-if="item.type == 'num'"
                                v-model="item.value"
                                class="editorforminput"
                                :precision="item.precision"
                                :step="item.step"
                                controls-position="right"
                                :min="item.min"
                                @input="numiput(item, option, data, property)"
                            />
                            <!-- Switch 开关 -->
                            <el-switch
                                v-if="item.type == 'switch'"
                                v-model="item.value"
                                :active-value="item.active"
                                :inactive-value="item.inactive"
                                @change="item.change(item.value, option, data, property)"
                                style="--el-switch-on-color: rgba(32, 160, 255)"
                            />
                            <!-- 颜色块 -->
                            <el-color-picker
                                v-if="item.type == 'color'"
                                :predefine="global.defaultColor"
                                @change="item.change(item.value, option, data, property)"
                                :show-alpha="item.alpha"
                                class="editorforminput"
                                v-model="item.value"
                            />
                            <!-- 上传文件 -->
                            <div class="editorformItemRight" v-if="item.type == 'upload'">
                                <!-- <img :src="item.value" :title="item.value" /> -->
                                <el-image class="img" style="width: 32px; height: 32px" :src="item.value" fit="contain" />
                                <div class="uploade"><input type="file" /> <el-button type="success" link size="small">上传</el-button></div>
                            </div>
                            <!-- slider滑块 -->
                            <el-slider
                                v-if="item.type == 'slider'"
                                v-model="item.value"
                                :min="item.min"
                                :max="item.max"
                                :step="item.step"
                                class="editorformItemslider"
                                @input="item.change(item.value, option, data, property)"
                            />
                        </div>
                    </td>
                </div>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from "vue";
import global from "@/utils/global.data.params";
interface Props {
    options?: any; // 默认值
    data?: any;
    property?: any;
}
const props = withDefaults(defineProps<Props>(), {
    options: [],
    data: {},
    property: [],
});
const option: any = ref(props.options);

const property: any = ref(props.property);
console.log(property, 1111111);
// setTimeout(() => {
//     item.change(item.value, option, data, property);
// }, 30)
const numiput = (item: any, option: any, data: any, property: any) => {
    setTimeout(() => {
        item.change(item.value, option, data, property);
    }, 30);
};
// 初始化选项
// console.log(props.data);
let graphicType = props.data.options.plottingType;
props.property.forEach((v: any) => {
    if (
        graphicType == "corridor" ||
        graphicType == "circle" ||
        graphicType == "sector" ||
        graphicType == "ellipse" ||
        graphicType == "rectangle" ||
        graphicType == "polygon" ||
        graphicType == "column" ||
        graphicType == "ellipticCylinder"
    ) {
        props.options.forEach((o: any) => {
            if (o.datas.includes("clampToGround") && o.value) {
                v.children.forEach((d: any) => {
                    if (d.datas.includes("fill")) {
                        console.log(d);
                        d.isShow = false;
                    }
                });
            }
        });
    }
    // console.log(v);
});
</script>
